<template>
  <el-card shadow="hover">
    <template #header>
      <vab-icon icon="send-plane-2-line" />
      <!-- 计划 -->
      <el-tag class="card-header-tag" type="success">
        滁院校友圈：祝所有滁院学子都能住上别墅，开上保时捷
      </el-tag>
    </template>
    <el-table :data="tableData" row-key="title" height="400px">
      <el-table-column align="center" label="拖拽" width="50px">
        <template #default="{}">
          <vab-icon
            style="cursor: pointer"
            :icon="['fas', 'arrows-alt']"
          ></vab-icon>
        </template>
      </el-table-column>
      <el-table-column width="20px" />
      <el-table-column prop="activityTitle" label="活动标题" width="230px" />
      <el-table-column label="报名人数" width="220px">
        <template #default="{ row }">
          <el-progress
            :percentage="(row.applyTotal / row.peopleMax).toFixed(1)"
            :color="row.color"
          />
        </template>
      </el-table-column>
      <el-table-column width="20px" />
      <el-table-column prop="peopleMax" label="人数上限" />
      <el-table-column width="20px" />
      <el-table-column prop="activityDate" label="活动时间" />
    </el-table>
  </el-card>
</template>
<script>
  import Sortable from 'sortablejs'
  import { activitySelectBy } from '@/api/management/management'
  export default {
    data() {
      return {
        tableData: [
          {
            title: '帮助中小企业盈利1个亿',
            endTIme: '2099-12-31',
            percentage: 50,
            color: '#95de64',
          },
        ],
      }
    },
    mounted() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0]
          _this.tableData.splice(newIndex, 0, currRow)
        },
      })
    },
    created() {
      this.fetchData()
    },
    methods: {
      async fetchData() {
        await activitySelectBy({ page: 1, size: 20 }).then((res) => {
          if (res.code === 200) {
            this.tableData = res.data
          } else {
            this.$baseMessage('数据获取失败', 'error')
          }
        })
        setTimeout(() => {
          this.listLoading = false
        }, 500)
      },
    },
  }
</script>
